<template>
	<div class="alertStatistics">
		<div class="header">告警统计</div>
		<div id="alertStatisticsCount"></div>
	</div>
</template>
<script>
export default {
	name: 'alertStatistics',
	data() {
		return {};
	},
	methods: {
		initChart() {
			const myChart = this.$echarts.init(
				document.getElementById('alertStatisticsCount')
			);
			const option = {
				tooltip: {},
				color: ['#43ECF9'],
				xAxis: {
					type: 'category',
					data: ['5月', '6月', '7月', '8月'],
					axisTick: { show: false },
					axisLabel: {
						color: '#E4E4E4',
						interval: 0
					},
					splitLine: {
						show: false
					},
					boundaryGap: true
				},
				yAxis: {
					type: 'value',
					splitLine: {
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
					axisLabel: {
						color: '#E4E4E4'
					}
				},
				grid: {
					top: '8',
					right: '12',
					bottom: '0',
					left: '0',
					containLabel: true
				},
				series: [
					{
						type: 'bar',
						data: [18, 42, 35, 40],
						barWidth: 17
					}
				]
			};
			myChart.setOption(option);
		}
	},
	mounted() {
		this.initChart();
	}
};
</script>
<style lang="scss" scoped>
.alertStatistics {
	width: 100%;
	height: 100%;
	background: #0e2551;
	border-radius: 6px;
  display: flex;
  flex-direction: column;
	.header {
		display: flex;
		font-weight: bold;
		margin-left: 5px;
		background: linear-gradient(to right, #226dc4, #132054);
		font-size: 12px;
		line-height: 20px;
		padding: 0 10px;
		margin-bottom: 4px;
		width: 70px;
		height: 20px;
	}
	#alertStatisticsCount {
		width: 100%;
		flex: 1;
	}
}
</style>
